<template>
        <el-button type="primary" style="margin-left: 16px" @click="drawer = true">
            设置价格
        </el-button>

        <el-drawer v-model="drawer" title="设置价格" size="60%">
            <el-form :inline="true" :model="formData">
            <el-form-item label="价格">
                <el-input-number v-model="formData.price" :precision="2" placeholder="请输入价格" clearable />
            </el-form-item>

            <el-form-item label="备注">
                <el-input v-model="formData.brief" placeholder="请输入备注" clearable />
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="onsubmit">新增</el-button>
            </el-form-item>
            </el-form>

            <el-table :data="tableData" style="width: 100%;" >
                <el-table-column label="编号" fixed prop="id" width="50"></el-table-column>
                <el-table-column label="价格" prop="price" width="100">
                   <template #default="scope">
                      ¥{{ scope.row.price  }}
                   </template>
                </el-table-column>
                <el-table-column label="状态" prop="statusX" width="80" :formatter="formatter"></el-table-column>
            </el-table>
        </el-drawer>
         <div id="main" style="height: 600px; "></div> 
</template>

<script lang="ts" setup>
import priceApi from '@/api/priceApi';
import * as echarts from 'echarts';
import { dayjs, ElMessage } from 'element-plus'

const drawer = ref(false)

const formData = reactive<any>({ productId: 0, price: 0, brief: "" })

const productId = defineModel()

const tableData = ref([])



const formatter = (row: any, cellValue: any ,column : any,index: number) => {
    return dayjs(cellValue).format("YYYY年MM月DD日 HH时mm分");
}

watch(productId, () => {
    formData.productId = productId
    callApi()
})

onMounted(() => {

})

const setOption = () => {

    let dates = tableData.value.map((item: any) => dayjs(item.lastUpdateTime).format("YYYY年MM月DD"))
    let prices = tableData.value.map((item: any) => item.price)


    let option =
    {
        title: {
            text: '价格趋势图'
        },
        tooltip: {},
        toolbox: {
            show: true,
            feature: {
                mark: { show: true },
                dataView: { show: true, readOnly: false },
                magicType: { show: true, type: ['line', 'bar'] },
                restore: { show: true },
                saveAsImage: { show: true }
            }
        },
        xAxis: {
            data: dates.reverse()
        },
        yAxis: {},
        series: [
            {
                name: '价格',
                type: 'line',
                smooth: true,
                data: prices.reverse(),
                tooltip: {
                    valueFormatter: (value: any) => '¥ ' + value
                }
            }
        ]
    }
    initChart(option)
}

const initChart = (option: any) => {

    var myChart = echarts.init(document.getElementById('main'));

    myChart.setOption(option);

    window.addEventListener('resize', function () {
        myChart.resize();
    });

}
const callApi = () => {
    priceApi.select({ productId: formData.productId }).then((res: any) => {
        tableData.value = res
        setOption
    })
}

const onsubmit = () => {
    priceApi.insert(formData).then(() => {
        ElMessage.success("设置成功")
        // drawer.value = false
        callApi()
    })
}
</script>